<script setup lang="ts">

</script>

<template>
  <el-aside class="layout-sidebar">
    <el-menu
        router
        default-active="/"
        class="sidebar-menu"
    >
      <!-- 数据库菜单 -->
      <el-menu-item index="/home/sql">
        <el-icon><House /></el-icon>
        <span>数据库</span>
      </el-menu-item>

      <!-- SQL解析工具 -->
      <el-menu-item index="/home/sql-parser">
        <el-icon><Document /></el-icon>
        <span>SQL解析工具</span>
      </el-menu-item>

      <!-- SQL生成器 -->
      <el-menu-item index="/home/sql-creat">
        <el-icon><MagicStick /></el-icon>
        <span>SQL生成器</span>
      </el-menu-item>

      <!-- AI知识库 -->
      <el-menu-item index="/home/sql-know">
        <el-icon><Lightbulb /></el-icon>
        <span>AI知识库</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<style scoped>
/* 添加基础布局样式 */
.layout-sidebar {
  width: 200px;
  height: 100vh;
  background: #fff;
}

.sidebar-menu {
  border-right: none;
}

.el-menu-item {
  margin: 8px;
  border-radius: 4px;
}

.el-menu-item.is-active {
  background-color: var(--el-color-primary-light-9);
}

.el-icon {
  margin-right: 8px;
}
</style>